<template>


    <a-modal :title="title" :width="400" :destroyOnClose="true" :maskClosable="false"
             :visible="visible" @cancel="handleCancel">


        <a-form-model ref="ruleForm" :model="form" :rules="rules">

            <a-form-model-item ref="oldPlateNo" label="当前车牌号" prop="oldPlateNo">
                <a-input v-model="form.oldPlateNo" :disabled="true" @blur="() => {$refs.oldPlateNo.onFieldBlur();}"/>
            </a-form-model-item>


            <a-form-model-item ref="newPlateNo" label="修改后车牌号" prop="newPlateNo">
                <a-input v-model="form.newPlateNo" @blur="() => {$refs.newPlateNo.onFieldBlur();}"/>
            </a-form-model-item>


        </a-form-model>


        <!-- Modal 页脚 -->
        <template slot="footer">
            <a-button @click="handleCancel">关闭</a-button>
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </template>

    </a-modal>

</template>
<script>
    import {modifyPlateNo} from '../public/http.js';

    export default {

        props: ["record"],
        data() {
            return {
                loading: false, //按钮Loading
                title: "修改车牌",
                visible: true, //modal 显示状态


                form: {
                    oldPlateNo: null,
                    newPlateNo: null,
                },

                rules: {
                    oldPlateNo: [
                        {required: true, message: '当前车牌号不能为空', trigger: 'blur'},

                    ],
                    newPlateNo: [
                        {required: true, message: '修改后的车牌不能为空', trigger: 'blur'},
                        {max: 10, message: '车牌号长度不能超过10个字符串', trigger: 'blur'},

                    ],

                },


            };
        },
        methods: {


            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {
                    render: false
                });
            },


            //完成监听
            onSubmit(e) {


                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        let data = {id: this.record.id, plateNo: this.form.newPlateNo}
                        modifyPlateNo(data).then(res => {
                            this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                //关闭弹窗
                                this.visible = false;
                                this.$emit('closeModal', {render: true});
                            }
                        });


                    }
                })


            },
            ///分组选择
            onChange(checkedValues) {
                console.log('checked = ', checkedValues);
            },


        },


        created() {
            this.form.oldPlateNo = this.record.plateNo
        }
    };
</script>
